function UnReadBox(props) {
    const isShow = props.isShow;
    const unreadMessages = props.unreadMessages;
    const unreadBox = <h1>您有{ unreadMessages.length }条信息未读</h1>;
    const normalBox = <h1> 您暂无未读消息 </h1>
    if(isShow){
        if (unreadMessages.length > 0) {
            return unreadBox;
        } else {
            return normalBox;
        }
    }else{
        return null;
    }
}

//用来控制是否显示未读盒子

class BoxControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = { showBox: true , message:['1','2','3','4'] };
        this.handleToggleClick = this.handleToggleClick.bind(this);
        this.handleClearMessage = this.handleClearMessage.bind(this);
    }

    handleToggleClick(){
        this.setState(state=>({
            showBox:!state.showBox
        }));
    }
    handleClearMessage(){
        this.setState(state=>({
            message:[]
        }))
    }
    render(){
        return(
            <div>
                <button onClick={ this.handleToggleClick }>
                    { this.state.showBox ? '隐藏' : '显示' }
                </button>
                <button onClick={ this.handleClearMessage }>清除未读</button>
                <UnReadBox 
                    unreadMessages = { this.state.message }
                    isShow = { this.state.showBox }
                />
            </div>
        )
    }
}

ReactDOM.render(
    <BoxControl></BoxControl>,
    document.getElementById('root')
)